<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :model-value="visible"
      title="参数对比项选择"
      width="1230px"
      draggable
      destroy-on-close
      align-center
      @close="closeDialog"
      class="maxhDialog"
    >
      <el-row :gutter="10">
        <!-- 用户列表 -->
        <el-col :span="24">
          <!-- <div class="search-container" style="padding: 18px 15px 0"> -->
          <el-form
            :model="searchParam"
            :inline="true"
            label-position="left"
            class="search-contain"
          >
            <el-form-item label="工段">
              <el-select
                v-model="searchParam.workshopSectionId"
                placeholder="请选择"
                clearable
                filterable
                @change="changeWorkshopSection"
                style="width: 120px"
              >
                <el-option
                  v-for="item in workshopSectionList"
                  :key="item.id"
                  :label="item.workshopSectionCode"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="工序">
              <el-select
                v-model="searchParam.processId"
                placeholder="请选择"
                clearable
                filterable
                @change="processChange"
                style="width: 120px"
              >
                <el-option
                  v-for="item in processCodeList"
                  :key="item.processId"
                  :label="item.processCode"
                  :value="item.processId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="生产线">
              <el-select
                v-model="searchParam.processEquipId"
                placeholder="请选择"
                clearable
                filterable
                @change="processEquipChange"
                style="width: 120px"
              >
                <el-option
                  v-for="item in processEquipList"
                  :key="item.processEquipId"
                  :label="item.processEquipCode"
                  :value="item.processEquipId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="设备">
              <el-select
                v-model="searchParam.equipIds"
                placeholder="请选择"
                clearable
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                @change="equipChange"
                class="select-device"
                style="width: 150px"
              >
                <el-option
                  v-for="item in equipList"
                  :key="item.equipId"
                  :label="item.equipName"
                  :value="item.equipId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="客户">
              <el-select
                v-model="searchParam.projectIds"
                placeholder="请选择"
                clearable
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                class="select-device"
                @change="projectChange"
              >
                <el-option
                  v-for="item in projectList"
                  :key="item.projectId"
                  :label="`${item.projectName}`"
                  :value="item.projectId"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="型号描述">
              <el-select
                v-model="searchParam.productModels"
                placeholder="请选择"
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                class="select-device"
                @change="productChange"
                :filter-method="customFilter1"
              >
                <el-option
                  v-for="item in filteredOptions1"
                  :key="item.productModel"
                  :label="`${item.productModelName ?? ''}`"
                  :value="item.productModel"
                />
              </el-select>
              <!-- <el-input
              v-model="searchParam.productModel"
              placeholder="请输入产品型号"
              clearable
              @keyup.enter="search"
            /> -->
            </el-form-item>
            <el-form-item label="产品型号">
              <el-select
                v-model="searchParam.productModels"
                placeholder="请选择"
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                class="select-device"
                @change="productChange"
                :filter-method="customFilter"
              >
                <el-option
                  v-for="item in filteredOptions"
                  :key="item.productModel"
                  :label="item.productModel"
                  :value="item.productModel"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="程序名">
              <el-input
                v-model="searchParam.programName"
                placeholder="请输入"
                clearable
                @keyup.enter="search"
                style="width: 120px"
              />
            </el-form-item>
            <el-form-item label="零件名称">
              <el-input
                v-model="searchParam.partName"
                placeholder="请输入"
                clearable
                @keyup.enter="search"
                style="width: 120px"
              />
            </el-form-item>
            <el-form-item label="工艺参数">
              <el-select
                v-model="searchParam.parameterDescs"
                placeholder="请选择"
                filterable
                multiple
                collapse-tags
                collapse-tags-tooltip
                class="select-device"
                :disabled="
                  !searchParam.equipIds.length &&
                  !searchParam.productModels.length
                "
              >
                <el-option
                  v-for="(item, index) in collectParamList"
                  :key="index"
                  :label="item.parameterDesc"
                  :value="item.parameterDesc"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="参数类型">
              <el-select
                v-model="searchParam.processDataType"
                placeholder="请选择参数类型"
                clearable
                filterable
                @change="processTypeChange"
              >
                <el-option label="工艺加工参数" value="2" />
                <el-option label="工艺过程参数" value="3" />
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="search"
                ><i-ep-search />搜索</el-button
              >
              <el-button @click="resetHandle"><i-ep-refresh />重置</el-button>
            </el-form-item>
          </el-form>
          <!-- </div> -->

          <!-- <el-card
            shadow="never"
            class="table-container card-table-p15 h-[536px]"
          > -->
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="tableData"
            :key="Math.random"
            @select="handleSelectionChange"
            @select-all="handleAllChange"
            class="card-table"
            border
            height="466px"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
              fixed="left"
            />
            <el-table-column
              label="工段"
              prop="workshopSectionCode"
              min-width="80"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="工序"
              prop="processCode"
              min-width="75"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="生产线"
              prop="processEquipCode"
              min-width="80"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="设备"
              prop="equipName"
              min-width="100"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="零件名称"
              prop="partName"
              min-width="100"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="客户"
              prop="projectName"
              align="center"
              min-width="85"
              show-overflow-tooltip
            />
            <el-table-column
              label="型号描述"
              prop="productModelName"
              align="left"
              min-width="120"
              show-overflow-tooltip
            />
            <el-table-column
              label="产品型号"
              prop="productModel"
              align="center"
              min-width="75"
              show-overflow-tooltip
            />
            <el-table-column
              label="程序名"
              prop="programName"
              min-width="75"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="参数名称"
              prop="parameterDesc"
              min-width="130"
              align="left"
              show-overflow-tooltip
            />
            <!-- <el-table-column
          label="采集状态"
          prop="collectStatus"
          min-width="80"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span>{{
              useDictionary("CollectStatus", scope.row.collectStatus ?? "")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="最后采集时间"
          prop="lastCollectTime"
          width="165"
          align="center"
          show-overflow-tooltip
        /> -->
            <el-table-column
              label="参数类型"
              prop="processDataType"
              min-width="90"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-tag v-if="scope.row.processDataType == 2">加工参数</el-tag>
                <el-tag type="success" v-if="scope.row.processDataType == 3"
                  >过程参数</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="监控数据类型"
              prop="monitorDataType"
              min-width="110"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-tag v-if="scope.row.monitorDataType == 1">动态量</el-tag>
                <el-tag type="success" v-if="scope.row.monitorDataType == 2"
                  >常量</el-tag
                >
                <el-tag type="warning" v-if="scope.row.monitorDataType == 3"
                  >补偿量</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="参考值"
              prop="parameterValue"
              min-width="70"
              align="right"
              show-overflow-tooltip
            />
            <el-table-column
              label="控制下限"
              prop="lowerLimitValue"
              min-width="74"
              align="right"
              show-overflow-tooltip
            />
            <el-table-column
              label="控制上限"
              prop="upperLimitValue"
              min-width="74"
              align="right"
              show-overflow-tooltip
            />
            <el-table-column
              label="采样频度"
              prop="samplingFrequency"
              min-width="100"
              align="center"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                <div class="">
                  <span>
                    {{
                      useDictionary(
                        "ScaCollectFrequency",
                        row.samplingFrequency ?? ""
                      )
                    }}
                  </span>
                  <span
                    v-if="
                      row.collectionFrequencyTime &&
                      row.samplingFrequency == '2'
                    "
                    >&nbsp; {{ row.collectionFrequencyTime
                    }}{{
                      row.collectionFrequencyUnit === "s"
                        ? "秒"
                        : row.collectionFrequencyUnit === "m"
                        ? "分钟"
                        : ""
                    }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="生成工单"
              prop="isGenerateWorkOrder"
              min-width="74"
              align="center"
              show-overflow-tooltip
            >
              <template #default="{ $index, row }">
                <div class="flex justify-center">
                  <el-switch
                    v-model="row.isGenerateWorkOrder"
                    disabled
                    :active-value="1"
                    :inactive-value="0"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="发送邮件"
              prop="isSendMail"
              min-width="74"
              align="center"
              show-overflow-tooltip
            >
              <template #default="{ $index, row }">
                <div class="flex justify-center">
                  <el-switch
                    v-model="row.isSendMail"
                    disabled
                    :active-value="1"
                    :inactive-value="0"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="第一负责人"
              prop="responsiblePersonName"
              min-width="120"
              align="center"
              show-overflow-tooltip
            />
          </el-table>

          <el-pagination
            small
            background
            :current-page="pageable.pageNum"
            :page-size="pageable.pageSize"
            :page-sizes="[10, 25, 50, 100]"
            :total="pageable.total"
            layout="total, sizes, prev, pager, next, jumper"
            class="mt-[15px]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!-- </el-card> -->
        </el-col>
      </el-row>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useTable, useDictionary } from "@/utils/useTable";
import { ElTable } from "element-plus";
import dayjs from "dayjs";
import request from "@/utils/request";
import {
  getMdminspectiontoolApi,
  getMdmProcessEquipApi,
  getMdmProcessProjectApi,
  getMdmproductinfosApi,
  getMdmprojectinfosApi,
  getSpecificListApi,
  getMdmprocessListApi,
  getMdmProcessEquipApi1,
} from "@/utils/commonData";
import SearchFormGroup from "@/views/pcm/pcmMonitoring/components/SearchFormGroup1.vue";
import _ from "lodash-es";
defineOptions({
  name: "PsmParamStatusContrastSelect",
  inheritAttrs: false,
});

interface SelectOption {
  id?: string;
}
const emit = defineEmits(["update:visible", "echo-info"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
  isMultiple: {
    type: Boolean,
    default: true,
  },
});

const { visible, isMultiple } = toRefs(props);

// 深层拷贝
function deepCopy(val: any) {
  return JSON.parse(JSON.stringify(val));
}

// 表格选择
const totalMultipleSelection: any = ref([]);
// 表格触发全选
function handleAllChange(selecteds: any) {
  if (isMultiple.value) {
    const currentSelection = deepCopy(totalMultipleSelection.value);
    const ids = deepCopy(totalMultipleIds.value);
    if (selecteds.length) {
      tableData.value.map((item: SelectOption) => {
        const indexId = ids.indexOf(item.id);
        if (indexId < 0) {
          totalMultipleSelection.value.push(item);
        }
      });
    } else {
      tableData.value.map((item: SelectOption) => {
        const indexId = ids.indexOf(item.id);
        if (indexId > -1) {
          currentSelection.splice(indexId, 1);
          ids.splice(indexId, 1);
        }
      });
      totalMultipleSelection.value = currentSelection;
    }
  } else {
    delAll();
    ElMessage.warning("单选，请重新选择");
  }
}
// 表格触发单个选择
function handleSelectionChange(val: any, row: SelectOption) {
  let addOptions = false;
  val?.map((item: SelectOption) => {
    if (item.id === row.id) {
      addOptions = true;
    }
  });
  if (!addOptions) {
    const index = totalMultipleIds.value.indexOf(row.id);
    totalMultipleSelection.value.splice(index, 1);
  } else {
    if (isMultiple.value) {
      totalMultipleSelection.value.push(row);
    } else {
      delAll();
      multipleTable.value?.toggleRowSelection(row, true);
      totalMultipleSelection.value = [row];
    }
  }
}

// 右侧人员选择操作
const multipleTable = ref(ElTable);
// 全部清除
function delAll() {
  totalMultipleSelection.value = [];
  multipleTable.value.clearSelection();
}
// 单个删除
function delSingle(current: SelectOption, index: number) {
  totalMultipleSelection.value.splice(index, 1);
  tableData.value.map((item: SelectOption) => {
    if (item.id === current.id) {
      multipleTable.value?.toggleRowSelection(item, false);
    }
  });
}

/** 弹窗展开 初始化数据 */
const totalMultipleIds: any = ref([]);
watch(
  () => totalMultipleSelection,
  async (newVal: any) => {
    const ids: any = [];
    newVal.value?.map((item: SelectOption) => ids.push(item.id));
    totalMultipleIds.value = ids;
  },
  { deep: true }
);

// 请求参数
const requestApi = "/dmpDosPcm/psmparammonitordetail/queryAllDataByPage";

// 是否需要分页
const pagination = true;

const initParam = reactive({});

// 初始化搜索参数数据
const searchParamInit = {
  // 工段
  workshopSectionId: "",
  workshopSectionCode: "",
  // 项目
  // projectCode: "",
  // projectId: "",
  // 工序
  processCode: "",
  processId: "",
  // 设备
  equipCode: "",
  equipId: "",
  // 产品型号
  productCode: "",
  productId: "",
  // 检具类型
  gageEquipToolKind: "",
  // 检具名称
  gageEquipCode: "",
  // 机器号
  gageEquipMarkCode: "",
  // 特性
  paramId: "",
};

// 数据请求错误后处理
function requestError() {}

// 数据请求错误后处理
function dataCallBack(data: any) {
  setTimeout(() => {
    data.map((item: SelectOption) => {
      if (totalMultipleIds.value.includes(item.id)) {
        multipleTable.value?.toggleRowSelection(item, true);
      }
    });
  }, 0);
  return data;
}

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  loading,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack,
  requestError
);

/** 弹窗展开 初始化数据 */
const oldTotalSelection: any = ref([]);
watch(
  () => props.visible,
  async (newVal: boolean) => {
    if (newVal) {
      totalMultipleSelection.value = deepCopy(props.data);
      oldTotalSelection.value = deepCopy(props.data);
      dataCallBack(tableData.value);
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  totalMultipleSelection.value = oldTotalSelection.value;
  dataCallBack(tableData.value);
  emit("update:visible", false);
}

/** 确定提交 */
async function handleSubmit() {
  if (!isMultiple.value && totalMultipleSelection.value.length > 1) {
    ElMessage.error("请选择");
  } else {
    emit("update:visible", false);
    emit("echo-info", totalMultipleSelection.value);
  }
}

// 组件销毁时调用
onBeforeUnmount(() => {
  emit("update:visible", false);
  closeDialog();
});

// 处理传回数据
const handleSearchChange = (data) => {
  Object.assign(searchParam.value, data);
  // 可执行字段相关的特定逻辑
};
// --------------------------------------------------------------------------------------------------------组件 结束

// 间距变化
const changeEquipCode = (id: string) => {
  if (id) {
    searchParam.paramId = "";
  }
};
// 获取量检具列表
const gageEquipList = ref<any>([]);

async function getGageEquipList(params) {
  gageEquipList.value = (await getMdminspectiontoolApi({})) || [];
}

// 预警工单 回显
function handleCheckAllChange1(formData: any) {
  if (
    formData.isSingleOrder == 0 &&
    formData.isAverageOrder == 0 &&
    formData.isLongOrder == 0 &&
    formData.isStageOrder == 0 &&
    formData.isFeaturesOrder == 0
  ) {
    return false;
  } else {
    return true;
  }
}

// 预警邮件 回显
function handleCheckAllChange2(formData: any) {
  if (
    formData.isSingle == 0 &&
    formData.isAverage == 0 &&
    formData.isLong == 0 &&
    formData.isStage == 0 &&
    formData.isFeatures == 0
  ) {
    return false;
  } else {
    return true;
  }
}

onMounted(() => {
  getProcessEquipList();
  getEquipList();
  getProcessCodeList();
  // 获取产品型号列表
  getProductList();
  getTableList();

  getProjectList();
  getWorkshopSectionList();
});

// 以下为搜索联动逻辑-------------------------------------------------
// 获取产品型号列表
const productList = ref<any>([]);
async function getProductList() {
  searchParam.value.productModels = [];
  productList.value = [];
  const { data } = await request({
    // url: `/dmpDosPcm/psmparammonitorrule/getProductList`,
    url: "/dmpDosPcm/psmparammonitorrule/exist/product/options",
    method: "post",
    data: {
      projectIds: searchParam.value.projectIds,
      processId: searchParam.value.processId,
      workshopSectionId: searchParam.value.workshopSectionId,
      equipIds: searchParam.value.equipIds,
      processEquipId: searchParam.value.processEquipId,
    },
  });
  productList.value = data || [];
  filteredOptions.value = [...productList.value];
  filteredOptions1.value = [...productList.value];
}
const filteredOptions = ref<any>([]);
// 使用 debounce 包装过滤方法
const customFilter = _.debounce((query: any) => {
  if (!query) {
    filteredOptions.value = [...productList.value];
    return;
  }
  filteredOptions.value = productList.value.filter((option: any) =>
    option.productModel.toLowerCase().includes(query.toLowerCase())
  );
}, 300); // 延迟 300ms

const filteredOptions1 = ref<any>([]);
const customFilter1 = _.debounce((query: any) => {
  if (!query) {
    filteredOptions1.value = [...productList.value];
    return;
  }
  filteredOptions1.value = productList.value.filter((option: any) => {
    return option?.productModelName
      ?.toLowerCase()
      .includes(query.toLowerCase());
  });
}, 300); // 延迟 300ms
function productChange(ids: string) {
  //   collectParamList.value = [];
  //   if (ids.length) {
  //     getCollectParamList();
  //   } else {
  //     searchParam.value.equipIds = [];
  //   }

  startSearchCollect();
}

// 获取工序列表
const processCodeList: any = ref([]);
async function getProcessCodeList() {
  searchParam.value.processId = "";
  searchParam.value.processCode = "";
  const { data } = await request({
    // url: `/mdm/mdmprocess/getList`,
    url: "/dmpDosPcm/psmparammonitorrule/exist/process/options",
    method: "post",
    data: {
      workshopSectionId: searchParam.value.workshopSectionId,
    },
  });
  processCodeList.value = data;
}
function processChange() {
  getProcessEquipList();
  getEquipList();
  getProjectList();
  getProductList();

  startSearchCollect();
}

// 通过工序查询设备列表
const equipList = ref(<any>[]);
async function getEquipList(id?: string) {
  searchParam.value.equipIds = [];
  equipList.value = [];
  const res: any = await request({
    // url: "/iotadmin/scaequipinfo/getlist",
    // url: "/dmpDosPcm/equipmentInfo/getList",
    // url: "/dmpDosPcm/psmparammonitorrule/getScaEquipList",
    url: "/dmpDosPcm/psmparammonitorrule/exist/equip/options",
    method: "post",
    data: {
      processCode: searchParam.value.processCode,
      processId: searchParam.value.processId,
      workshopSectionId: searchParam.value.workshopSectionId,
      processEquipId: searchParam.value.processEquipId,
    },
  });
  if (res.code === 200) {
    equipList.value = res.data;
  }
}
function equipChange(ids?: string) {
  getProjectList();
  getProductList();
  startSearchCollect();
}

const collectParamList = ref(<any>[]);
async function getCollectParamList(id?: string) {
  collectParamList.value = [];
  searchParam.value.parameterDescs = [];
  if (searchParam.value.equipIds.length || searchParam.value.productModels) {
    const res: any = await request({
      url: "/dmpDosPcm/psmparammonitorrule/getParameterList",
      method: "post",
      data: {
        processId: searchParam.value.processId,
        equipIds: searchParam.value.equipIds,
        productModels: searchParam.value.productModels,
      },
    });
    if (res.code === 200) {
      collectParamList.value = res.data || [];
    }
  }
}

// 获取工序列表
const projectList: any = ref([]);
async function getProjectList() {
  searchParam.value.projectIds = [];
  projectList.value = [];
  const { data } = await request({
    // url: `/mdm/mdmprojectinfo/getList`,
    url: "/dmpDosPcm/psmparammonitorrule/exist/project/options",
    method: "post",
    data: {
      processId: searchParam.value.processId,
      workshopSectionId: searchParam.value.workshopSectionId,
      equipIds: searchParam.value.equipIds,
      processEquipId: searchParam.value.processEquipId,
    },
  });
  projectList.value = data;
  getProductList();
}
function projectChange(ids: string) {
  if (ids.length) {
    getProductList();
  } else {
    searchParam.value.projectIds = [];
    getProductList();
  }

  startSearchCollect();
}

function startSearchCollect() {
  searchParam.value.parameterDescs = [];
  collectParamList.value = [];
  if (
    searchParam.value.productModels.length ||
    searchParam.value.equipIds.length
  ) {
    getCollectParamList();
  }
}
const resetHandle = () => {
  reset();
  getProcessEquipList();
  getEquipList();
  getProductList();
  getProjectList();
  getProcessCodeList();
};
const workshopSectionList = ref([]);
const getWorkshopSectionList = async () => {
  await request({
    url: `mdm/mdmworkshopsection/getList`,
    method: "post",
    data: {},
  }).then((res) => {
    workshopSectionList.value = res.data;
  });
};

// 获取工序列表
const processEquipList: any = ref([]);
async function getProcessEquipList() {
  searchParam.value.processEquipId = "";
  processEquipList.value = [];
  const { data } = await request({
    // url: `/mdm/mdmprocess/getList`,
    url: "/dmpDosPcm/psmparammonitorrule/exist/processEquip/options",
    method: "post",
    data: {
      workshopSectionId: searchParam.value.workshopSectionId,
      processId: searchParam.value.processId,
    },
  });
  processEquipList.value = data;
}
function processEquipChange() {
  getEquipList();
  getProjectList();
  getProductList();
  startSearchCollect();
}

const changeWorkshopSection = () => {
  getProcessCodeList();
  getProcessEquipList();
  getEquipList();
  getProjectList();
  getProductList();

  startSearchCollect();
};

// 以上为搜索联动逻辑-------------------------------------------------
</script>

<style lang="scss" scoped>
:deep(.maxhDialog .el-dialog__body) {
  overflow-y: auto;
  padding: 20px 20px 2px;
  .mini-search {
    padding: 8px 12px;
  }
  .el-card__body {
    padding: 15px;
  }
  .search-contain .el-select {
    width: 150px;
    margin-right: 10px;
    .el-tag {
      padding: 0 5px;
    }
  }
  .search-contain .el-form-item__label {
    padding: 0;
    margin-right: 7px;
  }
  .search-contain .el-input {
    // width: 150px;
    margin-right: 10px;
  }
  .el-table--default .cell {
    padding: 0 5px;
  }
  .el-table__body-wrapper .el-table__cell {
    padding: 4.5px 0;
  }
  .el-table__empty-block {
    min-height: 200px;
  }
}
// :deep(.el-dialog__body) {
//   padding-bottom: 0px !important;
//   padding-top: 15px !important;
// }
.name:hover {
  background-color: rgb(236, 245, 255) !important;
  color: var(--el-menu-active-color) !important;
  border-radius: 6px;
  svg {
    color: var(--el-menu-active-color) !important;
  }
}
.name svg {
  cursor: pointer;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 10px;
  margin-bottom: 14px;
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}
.el-button svg {
  margin-right: 0;
}
.card-table-p15 {
  :deep(.el-dialog__body) {
    padding: 15px;
  }
  .card-table {
    line-height: normal;
  }
}

:deep(.el-tree) {
  height: 533px;
}
</style>
